<!DOCTYPE html>
<html lang="zh">
<head>
  <title>ionic JS列表</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../lib/ionic/css/ionic.min.css">
</head>
<body ng-app="starter" ng-controller="myCtrl">
<ion-header-bar class="bar-positive">
  <div class="buttons">
    <button class="button button-icon icon ion-ios-minus-outline"
            ng-click="data.showDelete=!data.showDelete;data.showReorder=false">
    </button>
  </div>
  <h1 class="title">通讯录</h1>
  <div class="buttons">
    <button class="button"
            ng-click="data.showDelete=false;data.showReorder=!data.showReorder">排序
    </button>
  </div>
</ion-header-bar>

<ion-content>
  <!--NOTE
      prop delegate-handle str 用于定义带有$ionicListDelegate的列表
      prop show-delete bool 如果成员中存在删除按钮，定义是否显示删除按钮
      prop show-reorder bool
      prop can-swipe bool 默认为true
      prop type list-inset|card 用来设置列表的种类。都带有产生内嵌的效果，区别在于是否有边框阴影效果

      method $ionicListDelegate.showReorder(showReorder?: bool|bool-exp)
      method $ionicListDelegate.showDelete(showDelete? :bool|booExp
      method $ionicListDelegate.canSwipeItems(canSwipeItems? :bool|booExp)
      method $ionicListDelegate.closeOptionButtons() 关闭所有选项按钮
  -->
  <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
    <ion-item ng-repeat="item in items" item="item"
              href="#/item/{{item.id}}" class="item-remove-animate">
      好友{{item.id}}
      <ion-delete-button class="ion-minus-circled"></ion-delete-button>
      <ion-option-button class="button-assertive">星标好友</ion-option-button>
      <ion-option-button class="button-balanced">修改备注</ion-option-button>
      <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
    </ion-item>
  </ion-list>
</ion-content>

<script src="../../lib/ionic/js/ionic.bundle.js"></script>
<script src="../../js/app.js"></script>
<script>
  angular.module("starter", ["ionic"]).controller("myCtrl", function ($scope) {
    $scope.data = {showDelete: false, showReorder: false};
    //排序
    $scope.moveItem = function (item, fromIndex, toIndex) {
      $scope.items.splice(fromIndex, 1);
      $scope.items.splice(toIndex, 0, item);
    };
    //删除好友
    $scope.onItemDelete = function (item) {
      $scope.items.splice($scope.items.indexOf(item), 1);
    };

    $scope.items = [
      {id: 0}, {id: 1}, {id: 2}, {id: 3}, {id: 4},
      {id: 5}, {id: 6}, {id: 7}, {id: 8}, {id: 9}
    ];
  })

</script>
</body>
</html>
